<template>
  <div class="cate">
    <!-- 搜索框 -->
    <van-search
      v-model="searchValue"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      disabled
      @click="$router.push('/home/searchPopup')"
    />
    <!-- 分类导航 -->
    <div class="cate-view">
      <!-- 左侧导航 -->
      <van-row>
  <van-col span="5">
    <div class="left-view">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item @click="changeActiveKey(item.id)" v-for="item in categoryList" :key="item.id" :title="item.name" />
      </van-sidebar>
      </div>
      </van-col>
      <!-- 右侧分类 -->
      <van-col span="19">
      <div class="right-view">
        <van-image
        lazy-load
        :src="currentCategory.banner_url"
        style="display: block"
        width="100%"
        height="8rem"
        alt=""
      >
      </van-image>
        <div class="title">
          <span></span>
          <h3>{{currentCategory.name}}</h3>
        </div>
      </div>
      <van-grid :column-num="3">
        <van-grid-item v-for="item in currentCategory.subCategoryList" :key="item.id" :icon="item.banner_url" :text="item.name" />
      </van-grid>
      </van-col>
      </van-row>
    </div>
</div>
</template>

<script>
import { getAllCategory, getCurrentCategory } from '@/request/api'
export default {
  created() {
    getAllCategory().then(res => {
      console.log(res.data);
      this.categoryList = res.data.categoryList
      this.currentCategory = res.data.currentCategory
    })
  },
  data () {
    return {
      // 左侧导航数据
      categoryList: [],
      // 右侧分类数据
      currentCategory: [],
      // 导航栏选中项
      activeKey: 0,
      // 搜索框双向绑定数据
      searchValue: ''
    }
  },
  methods: {
    // 改变activeKey
    changeActiveKey(topId) {
      this.activeKey = topId
      console.log(this.activeKey);
      getCurrentCategory({ id: topId }).then(res => {
        console.log(res.data);
        this.currentCategory = res.data.currentCategory
      })
      console.log(this.currentCategory);
    }
  }
}
</script>

<style lang='less' scoped>
.van-search {
  border-bottom: 2px solid #eee;
}
.van-sidebar-item {
  text-align: center;
}
.cate-view {
  height: 35rem;
  background-color: #fff;
  .right-view {
    .title {
      position: relative;
      text-align: center;
      height: 3rem;
      line-height: 3rem;
      font-size: 1rem;
      border-bottom: 2px solid #eee;
      align-items: center;
      h3 {
        width: 30%;
        margin: auto;
        background-color: #fff;
        position: absolute;
        top: 0%;
        left: 35%;
        z-index: 5;
      }
      span {
        position: absolute;
        top: 50%;
        left: 25%;
        display: block;
        width: 50%;
        height: 2px;
        background-color: #ccc;
        z-index: 1;
      }
    }
  }
}
</style>
